<template>
	<div class="flexcenter">
		<div class="max_width paddingtb">
			<div class="flexbetween">
				<div class="text_ht color_zero" v-show="type==1">全部优课</div>
				<div class="text_ht color_zero" v-show="type==2">全部辅导</div>
				<div class="text_ht color_zero" v-show="type==3">全部测试</div>
				<div class="text_ht color_zero" v-show="type==4">全部资料</div>
				<div class="text_d color_nine">共找到{{list.total}}个结果</div>
			</div>
			<!-- 筛选 -->
			<div class="flexleft margin_top">
				<div class="flexleft margin_right3" @click="screenList(1)">
					<div class="text_d" :class="sort_type == 1 ? 'color_theme' : 'color_six'">好评</div>
					<div v-if="sort_type == 1 && weigh == 1">
						<div class="arrow_top_active"></div>
						<div class="arrow_bottom"></div>
					</div>
					<div v-else-if="sort_type == 1 && weigh == 2">
						<div class="arrow_top"></div>
						<div class="arrow_bottom_active"></div>
					</div>
					<div v-else>
						<div class="arrow_top"></div>
						<div class="arrow_bottom"></div>
					</div>
				</div>
				<div class="flexleft margin_right3" @click="screenList(2)">
					<div class="text_d" :class="sort_type == 2 ? 'color_theme' : 'color_six'">收藏</div>
					<div v-if="sort_type == 2 && weigh == 1">
						<div class="arrow_top_active"></div>
						<div class="arrow_bottom"></div>
					</div>
					<div v-else-if="sort_type == 2 && weigh == 2">
						<div class="arrow_top"></div>
						<div class="arrow_bottom_active"></div>
					</div>
					<div v-else>
						<div class="arrow_top"></div>
						<div class="arrow_bottom"></div>
					</div>
				</div>
				<div class="flexleft margin_right3" @click="screenList(3)">
					<div class="text_d" :class="sort_type == 3 ? 'color_theme' : 'color_six'">销量</div>
					<div v-if="sort_type == 3 && weigh == 1">
						<div class="arrow_top_active"></div>
						<div class="arrow_bottom"></div>
					</div>
					<div v-else-if="sort_type == 3 && weigh == 2">
						<div class="arrow_top"></div>
						<div class="arrow_bottom_active"></div>
					</div>
					<div v-else>
						<div class="arrow_top"></div>
						<div class="arrow_bottom"></div>
					</div>
				</div>
				<div class="flexleft margin_right3" @click="screenList(4)">
					<div class="text_d" :class="sort_type == 4 ? 'color_theme' : 'color_six'">价格</div>
					<div v-if="sort_type == 4 && weigh == 1">
						<div class="arrow_top_active"></div>
						<div class="arrow_bottom"></div>
					</div>
					<div v-else-if="sort_type == 4 && weigh == 2">
						<div class="arrow_top"></div>
						<div class="arrow_bottom_active"></div>
					</div>
					<div v-else>
						<div class="arrow_top"></div>
						<div class="arrow_bottom"></div>
					</div>
				</div>
			</div>
			<!-- 优课 -->
			<div class="flexbetween flex_wrap" v-if="type == 1">
				<course v-for="item in list.data" :child="item" :key="item.id"></course>
			</div>
			<!-- 辅导、资料 -->
			<div class="flexbetween flex_wrap" v-if="type == 2 || type == 4">
				<information v-for="item in list.data" :child="item" :key="item.id"></information>
			</div>
			<!-- 测试 -->
			<div class="flexbetween flex_wrap" v-if="type == 3">
				<test-child v-for="item in list.data" :child="item" :key="item.id"></test-child>
			</div>
			<div class="flexcenter margin_top" v-if="list.total > 15">
				<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
					@current-change="listChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import { getCourse } from "@/API/home"
import course from "@/views/fineCourse/components/course"
import information from "@/views/information/components/information"
import testChild from "@/views/test/components/testChild"
export default {
	components: {
		course,
		information,
		testChild
	},
	data() {
		return {
			njInfo: {},//年级信息
			type: 0,//分类:1=优课,2=辅导,3=测试,4=资料
			sort_type: "",//排序类型:1=好评率,2=收藏,3=销量,4=价格
			weigh: "",//权重:1=升序,2=降序
			list: {
				data: []
			}
		}
	},
	created() {
		let njInfo = localStorage.getItem("njInfo")
		if (njInfo) {
			this.njInfo = JSON.parse(njInfo)
		}
		this.type = this.$route.query.type
		this.getCourseList()
	},
	methods: {
		async getCourseList(page) {
			let res = await getCourse({
				page: page || 1,
				type: this.type,
				period: this.njInfo.period,//学段:1=小学,2=初中,3=高中,4=大学
				education_grade_id: this.njInfo.id,//年级id
				sort_type: this.sort_type,//排序类型:1=好评率,2=收藏,3=销量,4=价格
				weigh: this.weigh,//权重:1=升序,2=降序
			})
			this.list = res.data.data
			this.list.data = res.data.data.data
		},
		screenList(type) {
			if (this.sort_type == type) {
				this.weigh = this.weigh == 1 ? 2 : 1
			} else {
				this.sort_type = type
				this.weigh = 1
			}
			this.getCourseList()
		},
		listChange(val) {
			console.log(val)
			this.getCourseList(val)
		},
	},
}
</script>

<style lang="scss" scoped></style>